<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-brown">1</div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-blue">2</div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">3</div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-blue-light">4</div>
            </el-col>
        </el-row>
        <el-card class="lineCard">
            <BaseChart width="100%" height="376px" :option="lineOption"></BaseChart>
        </el-card>
        <el-card class="pieCard">
            <BaseChart width="100%" height="376px" :option="pieOption"></BaseChart>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>今日订单</span>
            </div>
            <div class="text item">
                <div class="box">
                    <div>今日订单数:</div>
                    <div>666</div>
                </div>
                <div class="box">
                    <div>今日订单数:</div>
                    <div>666</div>
                </div>
                <div class="box">
                    <div>今日订单数:</div>
                    <div>666</div>
                </div>
            </div>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>本月订单</span>
            </div>
            <div class="text item">
                无
            </div>
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>快捷入口</span>
            </div>
            <div class="text item">
                <el-button type="primary">产品管理</el-button>
                <el-button>消息管理</el-button>
                <el-button>内容管理</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import BaseChart from './BaseChart.vue';
export default {
    components: {
        BaseChart
    },
    computed: {
        lineOption() {
            const option = {
                title: {
                    text: 'Stacked Line'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230]
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330]
                    },
                    {
                        name: 'Video Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330]
                    },
                    {
                        name: 'Direct',
                        type: 'line',
                        stack: 'Total',
                        data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330]
                    },
                    {
                        name: 'Search Engine',
                        type: 'line',
                        stack: 'Total',
                        data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330]
                    }
                ]
            }
            return option
        },
        pieOption() {
            const option = {
                title: {
                    text: 'Referer of a Website',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            return option
        }
    },

}

</script>

<style scoped>
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.box-card {
    display: inline-block;
    line-height: 0;
    text-align: left;
    width: 31%;
    margin: 0 1%;
    margin-top: -50px;
}

.clearfix {
    height: 10px;
}

.text {
    text-align: center;
}

.item {
    display: flex;
    justify-content: space-around;
}

.box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.lineCard {
    display: inline-block;
    margin-right: 20px;
    width: 70%;
}

.pieCard {
    display: inline-block;
    width: 28%;
}

.el-col {
    height: 200px;
    border-radius: 4px;
}

.bg-brown {
    background: rgba(211, 131, 113);
}

.bg-purple {
    background: #A15598;
}

.bg-blue {
    background: #3487DC;
}

.bg-blue-light {
    background-color: #1DA2C7;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: orange;
}
</style>